/*
 * @Description: 表单只读/文本模式
 * @Date: 2022-05-11 09:43:09
 */

import styles from './index.less';
import moment from 'moment';
import { parseToThousandthMoney } from './common';

const FormText = ({ ...itemSet }) => {
  const {
    type = 'input', // 类型
    value,
    options = [], // 下拉框数据
    addonAfter,
    addonBefore,
    format = 'YYYY-MM-DD',
    ...rest
  } = itemSet;

  // 默认值显示
  let valueText = value;

  // 特殊值处理
  const isEmpty = value === null || value === undefined || value === ''; // 🛠🎄特殊1：空值占位

  if (options?.length && !isEmpty) {
    // 🛠特殊2：带options类型回显，含select，radioGroup等
    let valList = [];
    if (Array.isArray(value)) {
      // 值为数组
      valList = value;
    } else if (typeof value === 'string') {
      // 值为字符串-按','切割
      valList = value?.split(',');
    } else {
      // 值为数字或其他
      valList = [value];
    }
    const labelList = options
      .filter(item => valList?.includes(item.value)) // 找出值option列表
      ?.map(item => item.label)
      ?.join('，'); // 返回label字符串
    valueText = labelList || valList?.join('，') || '-';
  }

  if ((addonAfter || addonBefore) && !isEmpty) {
    // 🛠🎄特殊3：前后缀添加
    if (addonAfter) {
      // 金额特殊处理
      valueText =
        addonAfter === '元' && !isNaN(Number(value))
          ? `￥${parseToThousandthMoney(Number(value))}`
          : `${valueText} ${addonAfter}`;
    }
    if (addonBefore) {
      valueText = `${addonBefore} ${valueText}`;
    }
  }

  if (
    ['datepicker', 'rangepicker'].includes(type) &&
    typeof value === 'object' &&
    !isEmpty
  ) {
    // 🛠🎄特殊3：日期格式处理
    if (Array.isArray(value)) {
      // 日期区间
      valueText = `${moment(new Date(value[0])).format(format)} ~ ${moment(
        new Date(value[1]),
      ).format(format)}`;
    } else {
      valueText = `${moment(new Date(value)).format(format)}`;
    }
  }

  valueText = isEmpty ? '-' : valueText;

  return <div className={styles.formText}>{valueText}</div>;
};

export default FormText;
